<template>
    <Dialog :openVis="visible" width="80%" title="健康终端报警列表" @close="closeModal">
        <template #container>
            <div class="user-info-modal" style="display: flex">
                <div style="width: 23%; padding: 0 20px 20px" class="fff">
                    <div style="margin-bottom: 10px; font-weight: bold"> 员工姓名：{{ infoData?.username }}</div>
                    <div style="margin-bottom: 10px; font-weight: bold"> 员工工号：{{ infoData?.workNo }}</div>
                    <div style="margin-bottom: 10px; font-weight: bold"> 工具编码：{{ infoData?.watchNo }}</div>
                    <div style="margin-bottom: 10px; font-weight: bold"> 手机号码：{{ infoData?.phone }}</div>
                    <div style="margin-bottom: 10px; font-weight: bold"> 单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位：{{ infoData?.unit }} </div>
                    <div style="margin-bottom: 10px; font-weight: bold">
                        部&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;门：{{ infoData?.department }}
                    </div>
                    <div style="margin-bottom: 10px; font-weight: bold"> 绑定日期：{{ infoData?.bindDate }}</div>
                </div>
                <div class="line"></div>
                <div style="width: 77%">
                    <a-tabs v-model:activeKey="activeKey">
                        <a-tab-pane key="0" tab="总览" />
                        <a-tab-pane key="1" tab="心率" />
                        <a-tab-pane key="2" tab="血氧" />
                        <a-tab-pane key="3" tab="压力" />
                        <a-tab-pane key="4" tab="睡眠" />
                        <a-tab-pane key="5" tab="体温" />
                        <a-tab-pane key="6" tab="锻炼" />
                        <a-tab-pane key="7" tab="步数" />
                    </a-tabs>
                    <div style="height: 60vh; overflow: auto">
                        <all-look
                            @change-params-date="changeParamsDate"
                            v-if="activeKey === '0'"
                            :info-data="info"
                            :userId="infoData?.userid"
                            class="tabs-d"
                        />
                        <heart-rate v-if="activeKey === '1'" :userId="infoData.userid" class="tabs-d" :keyType="activeKey" />
                        <blood-oxygen v-if="activeKey === '2'" :userId="infoData.userid" class="tabs-d" :keyType="activeKey" />
                        <pressure v-if="activeKey === '3'" :userId="infoData.userid" class="tabs-d" :keyType="activeKey" />
                        <sleep v-if="activeKey === '4'" :userId="infoData.userid" class="tabs-d" :keyType="activeKey" />
                        <temperature v-if="activeKey === '5'" :userId="infoData.userid" class="tabs-d" :keyType="activeKey" />
                        <motion v-if="activeKey === '6'" :userId="infoData.userid" class="tabs-d" :keyType="activeKey" />
                        <step-number v-if="activeKey === '7'" :userId="infoData.userid" class="tabs-d" :keyType="activeKey" />
                    </div>
                </div>
            </div>
        </template>
    </Dialog>
</template>
<script setup lang="ts">
    import Dialog from '/@/components/dialog/Dialog.vue';
    import { ref } from 'vue';
    import AllLook from '/@/components/secondaryScreen/secondMap/components/userInfoModal/allLook.vue';
    import HeartRate from '/@/components/secondaryScreen/secondMap/components/userInfoModal/heartRate.vue';
    import BloodOxygen from '/@/components/secondaryScreen/secondMap/components/userInfoModal/bloodOxygen.vue';
    import Pressure from '/@/components/secondaryScreen/secondMap/components/userInfoModal/pressure.vue';
    import Sleep from '/@/components/secondaryScreen/secondMap/components/userInfoModal/sleep.vue';
    import Temperature from '/@/components/secondaryScreen/secondMap/components/userInfoModal/temperature.vue';
    import Motion from '/@/components/secondaryScreen/secondMap/components/userInfoModal/motion.vue';
    import StepNumber from '/@/components/secondaryScreen/secondMap/components/userInfoModal/stepNumber.vue';
    import { queryAllStatisticsApi } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';

    const visible = ref(false);

    async function openModal(data = {}) {
        visible.value = true;
        activeKey.value = '0';
        paramsDate.value = '0';
        info.value = {};
        infoData.value = data;
        await getInfo();
    }

    function closeModal() {
        visible.value = false;
    }

    const activeKey = ref('0');
    const infoData = ref({});
    const paramsDate = ref('0');
    const info = ref({});

    async function changeParamsDate(v) {
        paramsDate.value = v;
        await getInfo();
    }

    async function getInfo() {
        await queryAllStatisticsApi({ type: paramsDate.value, userId: infoData.value?.userid }).then((res) => {
            info.value = res?.result;
        });
    }

    defineExpose({
        openModal,
        closeModal,
    });
</script>
<style scoped lang="less">
    @import './userInfoModal';

    :deep(.ant-tabs-nav-wrap) {
        justify-content: center;
    }

    :deep(.ant-tabs-top > .ant-tabs-nav::before, .ant-tabs-top > div > .ant-tabs-nav::before) {
        display: none;
    }

    :deep(.ant-tabs-tab + .ant-tabs-tab) {
        margin-left: calc(100% / 14);
    }

    :deep(.ant-tabs-nav-list) {
        width: 100%;
        justify-content: center;
    }

    .tabs-d {
        padding: 20px;
    }
</style>
